<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <title>Staff Manage--Add New Staff</title>
    <style>
  		.error_msg{color: red}
	</style>
    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="../../../../css/bootstrap.min.css" type="text/css" th:href="@{/css/bootstrap.min.css}"/>

    <!-- Custom Fonts -->
    <link rel="stylesheet" href="../../../../font-awesome/css/font-awesome.min.css" type="text/css" th:href="@{/font-awesome/css/font-awesome.min.css}"/>

    <!-- Plugin CSS -->
    <link rel="stylesheet" href="../../../../css/animate.min.css" type="text/css" th:href="@{/css/animate.min.css}"/>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="../../../../css/creative.css" type="text/css" th:href="@{/css/creative.css}"/>

	<link rel="stylesheet" href="../../../../script/easyui/themes/icon.css" th:href="@{/script/easyui/themes/icon.css}" />
    <link rel="stylesheet" href="../../../../script/easyui/themes/black/easyui.css" th:href="@{/script/easyui/themes/black/easyui.css}" />
   
    <!-- side bar -->
    <link rel="stylesheet" href="../../../../css/sidebar.css" th:href="@{/css/sidebar.css}" />   
   
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body id="page-top">

    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="../index.html" th:href="@{/staff/}">Sakila Management System</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                	<li sec:authorize="hasRole('ROLE_STAFF')">
						<form action="#" method="post" th:action="@{/staff/logout}">
							<input type="submit" value="Logout" class="btn btn-default"/>
						</form>
					</li>
					<li sec:authorize="hasRole('ROLE_STAFF')">
						<a class="btn" data-action="toggle" data-side="left" href="javascript:void(0)"><span sec:authentication="principal.staff.name">Member Name</span></a>
					</li>
                    <li>
                        <a class="page-scroll" href="../rental/add.html" th:href="@{/staff/goto_addRental}">New Order</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../rental/index.html" th:href="@{/staff/goto_viewOrder}">Order Manage</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../film/film.html" th:href="@{/staff/goto_viewFilms}">Film Manage</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="../member/index.html" th:href="@{/staff/goto_memberManage}">Customer Manage</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    
<aside class="bg-dark">
 	<div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <form action="#" method="post" enctype="multipart/form-data" th:object="${staff}" th:action="@{/staff/admin/addStaff}">
						    <table>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{name.firstName}" placeholder="First Name" class="form-control" /></h4></td>
						        <td><h4 th:if="${#fields.hasErrors('name.firstName')}" th:errors="*{name.firstName}" th:errorclass="error_msg">Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{name.lastName}" placeholder="Last Name" class="form-control" /></h4></td>
						        <td><h4 th:if="${#fields.hasErrors('name.lastName')}" th:errors="*{name.lastName}" th:errorclass="error_msg">Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{email}" placeholder="Email" class="form-control" /></h4></td>
						        <td><h4 th:if="${#fields.hasErrors('email')}" th:errors="*{email}" th:errorclass="error_msg">Email Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{username}" placeholder="Username" class="form-control" /></h4></td>
						        <td><h4 th:if="${#fields.hasErrors('username')}" th:errors="*{username}" th:errorclass="error_msg">Username Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="password" th:field="*{password}" placeholder="Password" class="form-control" /></h4></td>
						        <td><h4 th:if="${#fields.hasErrors('password')}" th:errors="*{password}" th:errorclass="error_msg">Password Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{address.phone}" placeholder="Phone" class="form-control" /></h4></td>
							    <td><h4 th:if="${#fields.hasErrors('address.phone')}" th:errors="*{address.phone}" th:errorclass="error_msg">Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{address.address1}" placeholder="Address" class="form-control" /></h4></td>
							    <td><h4 th:if="${#fields.hasErrors('address.address1')}" th:errors="*{address.address1}" th:errorclass="error_msg">Address Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td><h4><input type="text" th:field="*{address.district}" placeholder="District" class="form-control" /></h4></td>
							    <td><h4 th:if="${#fields.hasErrors('address.district')}" th:errors="*{address.district}" th:errorclass="error_msg">Errors</h4></td>
						      </tr>
						      <tr>
						        <td></td>
						        <td>
						          <h4>
						        	<select th:field="*{address.city.id}" class="form-control" >
							        	<option th:each="c : ${cities}" th:value="${c.id}" th:text="${c.name}">City Name</option>
							        </select>
						          </h4>
						        </td>
						        <td><h4>Choose City</h4></td>
						      </tr>
						      <tr>
						        <td><h4>Select Avatar:</h4></td>
						        <td><input type="file" name="upload" /></td>
						        <td></td>
						      </tr>						      
						      <tr>
						        <td><h4>Store:</h4></td>
						        <td>
						          <h4>
						        	<select th:field="*{store.id}" class="form-control">
							        	<option th:each="s : ${stores}" th:value="${s.id}" th:text="${s.address.address1}">Store Address</option>
							        </select>
						          </h4>						          
						        </td>
						        <td></td>
						      </tr>
						      <tr>
						      	<td></td>
						        <td colspan="2"><h4><input type="submit" value="Add New Staff" class="btn btn-lg btn-primary" /></h4></td>
						        <td></td>
						      </tr>
						    </table>
						</form>
                    </div>
                </div>
            </div>	   			
</aside>
    
<!-- Side Bar -->
            <div class="sidebar left">
            	  <ul style="position: relative; top: 55px;left:20px;" class="list-group list-unstyled">
            	    <li class="list-group"><img src="../../../../images/no-pic.jpg" class="img-circle" 
            	  		th:src="@{'/images/staff_' + ${#authentication.principal.staff.id} + '.jpg'}"
            	  		th:onerror="'this.src=\'' + @{/images/no-pic.jpg} + '\';'" /></li>
            	    <li class="list-group"><h4 sec:authentication="principal.staff.name">Member Name</h4></li>
            	    <li class="list-group"><a href="#" class="btn btn-info" th:href="@{/staff/goto_changePassword}">Change Password</a></li>
            	    <li class="list-group"><a href="#" class="btn btn-info" th:href="@{/staff/goto_changeAvatar}">Change Avatar</a></li>
            	    <li sec:authorize="hasRole('ROLE_MANAGER')" class="list-group"><a href="#" class="btn btn-info" th:href="@{/staff/admin/goto_addStaff}">Add Staff</a></li>
            	  </ul>  	
            </div>
    
    <!-- jQuery -->
    <script src="../../../../script/jquery-2.1.4.min.js" th:src="@{/script/jquery-2.1.4.min.js}"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../../../../script/bootstrap.min.js" th:src="@{/script/bootstrap.min.js}"></script>

    <!-- Plugin JavaScript -->
    <script src="../../../../script/jquery.easing.min.js" th:src="@{/script/jquery.easing.min.js}"></script>
    <script src="../../../../script/jquery.fittext.js" th:src="@{/script/jquery.fittext.js}"></script>
    <script src="../../../../script/wow.min.js" th:src="@{/script/wow.min.js}"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../../../../script/creative.js" th:src="@{/script/creative.js}"></script>

    <script src="../../../../script/easyui/jquery.easyui.min.js" th:src="@{/script/easyui/jquery.easyui.min.js}"></script>
    
    <script src="../../../../script/jquery.sidebar.min.js" th:src="@{/script/jquery.sidebar.min.js}"></script>
    <script src="../../../../script/sidebar.js" th:src="@{/script/sidebar.js}"></script>
</body>
</html>
